<template>
	<view class="container">
		<view class="header">
			<view class="left">
				创建名人百科
			</view>
			<view class="right">
				<view :class="currentTab==0?'item active':'item'" @click="changeTab(0)">
					输入时间
				</view>
				<view :class="currentTab==1?'item active':'item'" @click="changeTab(1)">
					四柱
				</view>
			</view>
		</view>
		<view class="form">
			<view class="form-item1">
				<view class="form-name">
					<view class="label">姓&nbsp&nbsp&nbsp名</view><input type="text" placeholder-style="color:#D3D3D3;font-size:28rpx"
						placeholder="输入称呼" v-model="params.name" />
				</view>
				<view class="form-group" @click="toGroup">
					<view class="">
						{{params.groupNmae?params.groupNmae:'选择分组'}}
					</view>
					<u-icon name="arrow-right" color=#C0C0C0></u-icon>
				</view>
			</view>
			<view class="form-item1">
				<view class="form-sex">
					<view class="label">
						性&nbsp&nbsp&nbsp别
					</view>
					<radio-group @change="sexChange" class="radio-group">
						<label class="radio-item" v-for="(item, index) in items" :key="item.value">
							<view class="sex-name">
								{{item.label}}
							</view>
							<view>
								<radio :value="item.value" :checked="params.sex==item.value" color="#42b983"
									style="transform:scale(0.8)" />
							</view>
						</label>
					</radio-group>
				</view>
				
			</view>
			<view class="form-item2" v-if="currentTab==0">
				<view class="left">
					<view class="label">
						出生地
					</view>
					<view class="tips">
						<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
							@change="pickerChange" @columnchange="pickerColumnchange">
							<view class="address" v-if="params.adress">
								{{params.adress}}
							</view>
							<view class="" v-else>
								<view class="">
									非必选
								</view>
								<!-- <view class="">
									选择后将根据出生地时差计算出真太阳时
								</view> -->
							</view>
						</picker>
					</view>
				</view>
				<u-icon name="arrow-right" color=#C0C0C0></u-icon>
			</view>
			<view class="form-item1" v-if="currentTab==0">
				<view class="form-sex">
					<view class="label">
						公农历
					</view>
					<radio-group @change="dateChange" class="radio-group">
						<label class="radio-item" style="margin-right: 25rpx;" v-for="(item, index) in dateTypes" :key="item.value">
							<view class="sex-name">
								{{item.label}}
							</view>
							<view>
								<radio :value="item.value" :checked="params.type==item.value" color="#42b983"
									style="transform:scale(0.8)" />
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="form-item2" v-if="currentTab==0">
				<view class="left">
					<view class="label">
						生&nbsp&nbsp&nbsp日
					</view>
					<view class="tips" @click="selectDate">
						<view class="birthday" v-if="params.birthday">
							<view class="">
								{{params.birthday}}
							</view>
							<view class="">
					
							</view>
						</view>
						<view class="" v-else>
							点击选择生日
						</view>
					</view>
				</view>
				<u-icon name="arrow-right" color=#C0C0C0></u-icon>
			</view>
			<view class="" v-if="currentTab==1">
				<view class="sizhu">
					<view class="top">
						<view class="item">
							年柱
						</view>
						<view class="item">
							月柱
						</view>
						<view class="item">
							日柱
						</view>
						<view class="item">
							时柱
						</view>
					</view>
					<view class="content">
						<view class="item" @click="showPop1=true">
							<view class="text" :style={color:colors[arr[0]]}>
								{{arr[0]}}
							</view>
							<view class="" v-if="showPop1">
								<view class="sanjiao">

								</view>
								<view class="pop-content1">
									<view class="pop-item" v-for="(item,i) in popArr1" :style={color:colors[popArr1[i]]}
										@click.stop="chooseZhu(0,item)">
										{{item}}
									</view>
								</view>
							</view>
						</view>
						<view class="item" @click="showPop2=true">
							<view class="text" :style={color:colors[arr[1]]}>
								{{arr[1]}}
							</view>
							<view class="" v-if="showPop2">
								<view class="sanjiao">

								</view>
								<view class="pop-content2">
									<view class="pop-item" v-for="(item,i) in popArr1" :style={color:colors[popArr1[i]]}
										@click.stop="chooseZhu(1,item)">
										{{item}}
									</view>
								</view>
							</view>
						</view>
						<view class="item" @click="showPop3=true">
							<view class="text" :style={color:colors[arr[2]]}>
								{{arr[2]}}
							</view>
							<view class="" v-if="showPop3">
								<view class="sanjiao">

								</view>
								<view class="pop-content3">
									<view class="pop-item" v-for="(item,i) in popArr1" :style={color:colors[popArr1[i]]}
										@click.stop="chooseZhu(2,item)">
										{{item}}
									</view>
								</view>
							</view>
						</view>
						<view class="item" @click="showPop4=true">
							<view class="text" :style={color:colors[arr[3]]}>
								{{arr[3]}}
							</view>
							<view class="" v-if="showPop4">
								<view class="sanjiao">

								</view>
								<view class="pop-content4">
									<view class="pop-item" v-for="(item,i) in popArr1" :style={color:colors[popArr1[i]]}
										@click.stop="chooseZhu(3,item)">
										{{item}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="content">
						<view class="item" @click="showPop5=true">
							<view class="text" :style={color:colors[arr[4]]}>
								{{arr[4]}}
							</view>
							<view class="" v-if="showPop5">
								<view class="sanjiao">

								</view>
								<view class="pop-content5">
									<view class="pop-item" v-for="(item,i) in formattedData(arr[4])" :style={color:colors[formattedData(arr[4])[i]]}
										@click.stop="chooseZhu(4,item)">
										{{item}}
									</view>
								</view>
							</view>
						</view>
						<view class="item" @click="showPop6=true">
							<view class="text" :style={color:colors[arr[5]]}>
								{{arr[5]}}
							</view>
							<view class="" v-if="showPop6">
								<view class="sanjiao">

								</view>
								<view class="pop-content6">
									<view class="pop-item" v-for="(item,i) in formattedData(arr[5])" :style={color:colors[formattedData(arr[5])[i]]}
										@click.stop="chooseZhu(5,item)">
										{{item}}
									</view>
								</view>
							</view>
						</view>
						<view class="item" @click="showPop7=true">
							<view class="text" :style={color:colors[arr[6]]}>
								{{arr[6]}}
							</view>
							<view class="" v-if="showPop7">
								<view class="sanjiao">

								</view>
								<view class="pop-content7">
									<view class="pop-item" v-for="(item,i) in formattedData(arr[6])" :style={color:colors[formattedData(arr[6])[i]]}
										@click.stop="chooseZhu(6,item)">
										{{item}}
									</view>
								</view>
							</view>
						</view>
						<view class="item" @click="showPop8=true">
							<view class="text" :style={color:colors[arr[7]]}>
								{{arr[7]}}
							</view>
							<view class="" v-if="showPop8">
								<view class="sanjiao">

								</view>
								<view class="pop-content8">
									<view class="pop-item" v-for="(item,i) in formattedData(arr[7])" :style={color:colors[formattedData(arr[7])[i]]}
										@click.stop="chooseZhu(7,item)">
										{{item}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qipan" @click="qipan">
			起盘并创建此八字百科
		</view>
		<uv-datetime-picker ref="datetimePicker" :itemHeight="60" v-model="birthday" mode="datetime" :minDate="minDate"
			:maxDate="maxDate" @confirm="confirmDate">
		</uv-datetime-picker>
		<view class="pop" v-if="showPop1||showPop2||showPop3||showPop4||showPop5||showPop6||showPop7||showPop8"
			@click="closePop">

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	import {
		$http,
		address,
		timestampToDateTime,
		textColors,
		initBaiduStatistics
	} from "@/common"
	import lunisolar from 'lunisolar'
	const colors = ref(textColors)
	const newProvinceDataList = ref(
		[
			[],
			[],
			[]
		]
	)
	const birthday = ref(Date.now())

	const params = reactive({
		group: '',
		groupNmae: '',
		tag: '',
		cate: 1, //1输入时间 2四柱
		province: '',
		city: '',
		type: 2,
		name: '',
		sex: 1,
		birthday: '',
		adress: '',
		year: '',
		month: '',
		day: '',
		hour: ''
	})
	const minDate = ref(new Date(1920, 0, 1).getTime())
	const maxDate = ref(new Date().getTime())
	const currentTab = ref(0)
	const arr = ref([
		lunisolar().char8.year.name[0], lunisolar().char8.month.name[0], lunisolar().char8.day.name[0],lunisolar().char8.hour.name[0], lunisolar().char8.year.name[1],lunisolar().char8.month.name[1], lunisolar().char8.day.name[1], lunisolar().char8.hour.name[1]
	])
	const popArr1 = ref(['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'])
	const popArr2 = ref(['丑', '卯', '巳', '未', '酉', '亥'])
	const popArr3 = ref(['子', '寅', '辰', '午', '申', '戌'])
	const chooseZhu = (i, item) => {
		arr.value[i] = item
		closePop()
	}
	const showPop1 = ref(false)
	const showPop2 = ref(false)
	const showPop3 = ref(false)
	const showPop4 = ref(false)
	const showPop5 = ref(false)
	const showPop6 = ref(false)
	const showPop7 = ref(false)
	const showPop8 = ref(false)
	const closePop = () => {
		showPop1.value = false
		showPop2.value = false
		showPop3.value = false
		showPop4.value = false
		showPop5.value = false
		showPop6.value = false
		showPop7.value = false
		showPop8.value = false
	}
	const formattedData=(str)=>{
	     return	popArr2.value.includes(str)?popArr2.value:popArr3.value
	}
	const changeTab = (index) => {
		currentTab.value = index
		params.cate = index == 0 ? 1 : 2
	}
	const close = () => {
		show.value = false
	}
	const groups = ref([])
	onLoad((options) => {
		$http.get('baziGroup').then(res => {
			groups.value = res
		})
		for (let i = 0; i < address.length; i++) {
			// console.log(this.oldpProvinceDataList[i].name);
			newProvinceDataList.value[0].push(address[i].label);
		}
		for (let i = 0; i < address[0].children.length; i++) {
			// console.log(this.oldpProvinceDataList[0].city[i].name)
			newProvinceDataList.value[1].push(address[0].children[i].label);
		}
		for (let i = 0; i < address[0].children[0].children.length; i++) {
			newProvinceDataList.value[2].push(address[0].children[0].children[i].label);
		}
	})
	//const oldpProvinceDataList = ref(address)
	const multiIndex = ref(
		[0, 0, 0])

	const items = ref([{
			label: '男',
			value: '1'
		},
		{
			label: '女',
			value: '2'
		}
	])
	const dateTypes = ref([{
			label: '公历',
			value: '2'
		},
		{
			label: '农历',
			value: '1'
		}
	])

	const sexChange = (e) => {
		params.sex = e.detail.value
		console.log(params.sex, 'sex')
	}
	const dateChange = (e) => {
		params.type = e.detail.value
		console.log(params, 'date')
	}
	const pickerChange = (e) => {
		multiIndex.value = e.detail.value
		params.province = newProvinceDataList.value[0][multiIndex.value[0]]
		params.city = newProvinceDataList.value[1][multiIndex.value[1]]
		params.adress = params.province + ' ' + params.city + ' ' + newProvinceDataList.value[2][multiIndex.value[2]]
	}
	const pickerColumnchange = (e) => {
		if (e.detail.column === 0) {
			multiIndex.value[0] = e.detail.value
			// console.log('第一列滑动');
			// this.newProvinceDataList[1] = [];
			newProvinceDataList.value[1] = address[multiIndex.value[0]].children.map((item, index) => {
				return item.label
			})
			// console.log(this.multiIndex)
			if (address[multiIndex.value[0]].children.length === 1) {
				console.log(address[multiIndex.value[0]].children)
				newProvinceDataList.value[2] = address[multiIndex.value[0]].children[0].children.map((item,
					index) => {
					return item.label
				})
			} else {
				console.log(address[multiIndex.value[0]].children)
				newProvinceDataList.value[2] = address[multiIndex.value[0]].children[multiIndex.value[
					1]].children.map((item, index) => {
					// console.log(item)
					return item.label
				})
			}
			// 第一列滑动  第二列 和第三列 都变为第一个
			multiIndex.value.splice(1, 1, 0)
			multiIndex.value.splice(2, 1, 0)
		}
		// 第二列滑动
		if (e.detail.column === 1) {
			multiIndex.value[1] = e.detail.value
			newProvinceDataList.value[2] = address[multiIndex.value[0]].children[multiIndex.value[1]]
				.children.map((item, index) => {
					return item.label
				})
			// 第二列 滑动 第三列 变成第一个
			multiIndex.value.splice(2, 1, 0)
		}
		// 第三列滑动
		if (e.detail.column === 2) {
			multiIndex.value[2] = e.detail.value
		}
	}

	const datetimePicker = ref()

	const selectDate = () => {
		datetimePicker.value.open()
	}
	const confirmDate = (e) => {
		params.birthday = timestampToDateTime(e.value)
		console.log(params, 'params')
	}
	const qipan = () => {
		if (!params.name) {
			uni.showToast({
				title: '请输入姓名!',
				icon: 'none'
			})
			return
		}
		if (currentTab.value == 0 && !params.birthday) {
			uni.showToast({
				title: '请选择生日!',
				icon: 'none'
			})
			return
		}
		if (currentTab.value == 1) {
			params.year = arr.value[0] + arr.value[4]
			params.month = arr.value[1] + arr.value[5]
			params.day = arr.value[2] + arr.value[6]
			params.hour = arr.value[3] + arr.value[7]
		}

		const param = toRaw(params)
		if(!param.group){
			param.group = groups.value[0].id
			param.groupNmae = groups.value[0].name
		}
		$http.get('wikiCreate', param).then(res => {
			console.log(res, 'rtr')
			uni.navigateTo({
				url: '/pages/baike/baike-result?qiPanId=' + res.qiPanId + '&name=' + param.name +
					'&id=' + res.id
			})
		})
	}
	const toGroup = () => {
		uni.navigateTo({
			url: '/pages/qipan/group?params=' + params.group
		})
	}
	onShow(() => {
		if (uni.getStorageSync('group')) {
			params.group = uni.getStorageSync('group').id
			params.groupNmae = uni.getStorageSync('group').name
		}
		// #ifdef H5
		setTimeout(() => {
			document.title = "幸运指南"
		})
		// #endif
	})
	onMounted(() => {
		// #ifdef H5
		setTimeout(() => {
			let a = document.getElementsByClassName("uni-page-head__title")[0]
			a.textContent = "创建名人百科"
		})
		// #endif
	})
	const toSzqp = () => {
		uni.navigateTo({
			url: '/pages/qipan/szqp'
		})
	}
</script>

<style lang="scss" scoped>
	.pop {
		position: fixed;
		/* 绝对定位 */
		top: 0;
		/* 顶部对齐 */
		left: 0;
		/* 左边对齐 */
		right: 0;
		/* 右边对齐 */
		bottom: 0;
		/* 底部对齐 */
		background-color: rgba(0, 0, 0, 0.5);
		/* 灰色背景，50% 透明度 */
		//pointer-events: none; /* 使得蒙层上的点击事件穿透到底层元素 */
		z-index: 999;
	}

	.container {
		padding: 20rpx 30rpx 0 30rpx;
		min-height: 100vh;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			padding-bottom: 24rpx;
			border-bottom: 0.03125rem solid #E6E6FA;

			.left {
				font-size: 44rpx;
				//font-weight: bold;
			}

			.right {
				display: flex;

				.item {
					margin-right: 14rpx;
				}

				.active {
					color: #42b983;
					border-bottom: 4rpx solid #42b983;
				}
			}
		}

		.form {
			.form-item1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #E6E6FA;

				.form-name,
				.form-sex {
					display: flex;
					align-items: center;
					flex: 2;

					input {
						width: 350rpx;
					}
				}

				.label {
					margin-right: 24rpx;
				}

				.form-group {
					display: flex;
					flex: 1;
					justify-content: space-between;
					align-items: center;
					color: #C0C0C0;
					font-size: 28rpx;
					border-left: 1rpx solid #E6E6FA;
					padding-left: 20rpx;
				}

				.form-sex {
					.radio-group {
						display: flex;

						.radio-item {
							display: flex;
							align-items: center;
							margin-right: 50rpx;
						}

						.sex-name {
							// width: 42rpx;
							// height: 42rpx;

							text-align: center;
							// line-height: 42rpx;
							// border-radius: 8rpx;

							margin-right: 8rpx;
						}
					}
				}
			}

			.form-item2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #E6E6FA;

				.label {
					margin-right: 24rpx;
				}

				.left {
					display: flex;
					align-items: center;
					flex: 1;

					.tips {
						font-size: 28rpx;
						color: #D3D3D3;
						flex: 1;
						border-left: 1rpx solid #F5F5F5;

						.birthday {
							color: #000;
						}

						.address {
							color: #000;
						}
					}

					.radio-group {
						display: flex;

						.radio-item {
							display: flex;
							align-items: center;
							margin-right: 20rpx;
						}

						.sex-name {
							// width: 42rpx;
							// height: 42rpx;

							text-align: center;
							//line-height: 42rpx;
							border-radius: 8rpx;

							margin-right: 8rpx;
						}
					}
				}
			}
		}
.sizhu {
			height: 350rpx;
			//background-color: #EFF8FF;
			padding: 60rpx 40rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
			}

			.content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;

				.item {
					position: relative;
					width: 100rpx;
					height: 100rpx;
					// text-align: center;
					// line-height: 100rpx;
					border: 1rpx solid #ccc;

					//font-size: 44rpx;
					.text {
						font-size: 42rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					.sanjiao {
						position: absolute;
						top: 104rpx;
						left: 30rpx;
						border-left: 14rpx solid transparent;
						border-right: 14rpx solid transparent;
						border-bottom: 20rpx solid #fff;
						z-index: 9999;
					}

					.pop-content1 {
						position: absolute;
						width: 700rpx;
						background-color: #fff;
						top: 120rpx;
						left: -16rpx;
						padding: 20rpx;
						z-index: 9999;
						display: flex;
						flex-wrap: wrap;
						border-radius: 20rpx;

						.pop-item {
							font-size: 50rpx;
							border: 1rpx solid #ccc;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 40rpx;
						}

						.pop-item:nth-child(5n) {
							margin-right: 0;
						}

						.pop-item:nth-child(-n+5) {
							margin-bottom: 20rpx;
						}
					}

					.pop-content2 {
						position: absolute;
						width: 700rpx;
						background-color: #fff;
						top: 120rpx;
						right: -396rpx;
						padding: 20rpx;
						z-index: 9999;
						display: flex;
						flex-wrap: wrap;
						border-radius: 20rpx;

						.pop-item {
							font-size: 50rpx;
							border: 1rpx solid #ccc;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 40rpx;
						}

						.pop-item:nth-child(5n) {
							margin-right: 0;
						}

						.pop-item:nth-child(-n+5) {
							margin-bottom: 20rpx;
						}
					}

					.pop-content3 {
						position: absolute;
						width: 700rpx;
						background-color: #fff;
						top: 120rpx;
						right: -210rpx;
						padding: 20rpx;
						z-index: 9999;
						display: flex;
						flex-wrap: wrap;
						border-radius: 20rpx;

						.pop-item {
							font-size: 50rpx;
							border: 1rpx solid #ccc;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 40rpx;
						}

						.pop-item:nth-child(5n) {
							margin-right: 0;
						}

						.pop-item:nth-child(-n+5) {
							margin-bottom: 20rpx;
						}
					}

					.pop-content4 {
						position: absolute;
						width: 700rpx;
						background-color: #fff;
						top: 120rpx;
						right: -20rpx;
						padding: 20rpx;
						z-index: 9999;
						display: flex;
						flex-wrap: wrap;
						border-radius: 20rpx;

						.pop-item {
							font-size: 50rpx;
							border: 1rpx solid #ccc;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 40rpx;
						}

						.pop-item:nth-child(5n) {
							margin-right: 0;
						}

						.pop-item:nth-child(-n+5) {
							margin-bottom: 20rpx;
						}
					}

					.pop-content5 {
						position: absolute;
						width: 700rpx;
						background-color: #fff;
						top: 120rpx;
						left: -16rpx;
						padding: 20rpx;
						z-index: 9999;
						display: flex;
						justify-content: space-between;
						border-radius: 20rpx;

						.pop-item {
							font-size: 50rpx;
							border: 1rpx solid #ccc;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.pop-content6 {
						position: absolute;
						width: 700rpx;
						background-color: #fff;
						top: 120rpx;
						right: -396rpx;
						padding: 20rpx;
						z-index: 9999;
						display: flex;
						justify-content: space-between;
						border-radius: 20rpx;

						.pop-item {
							font-size: 50rpx;
							border: 1rpx solid #ccc;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.pop-content7 {
						position: absolute;
						width: 700rpx;
						background-color: #fff;
						top: 120rpx;
						right: -210rpx;
						padding: 20rpx;
						z-index: 9999;
						display: flex;
						justify-content: space-between;
						border-radius: 20rpx;

						.pop-item {
							font-size: 50rpx;
							border: 1rpx solid #ccc;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.pop-content8 {
						position: absolute;
						width: 700rpx;
						background-color: #fff;
						top: 120rpx;
						right: -20rpx;
						padding: 20rpx;
						z-index: 9999;
						display: flex;
						justify-content: space-between;
						border-radius: 20rpx;

						.pop-item {
							font-size: 50rpx;
							border: 1rpx solid #ccc;
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

			}
		}
		.qipan {
			width: 520rpx;
			height: 86rpx;
			border-radius: 43rpx;
			line-height: 86rpx;
			text-align: center;
			background-color: #42b983;
			color: #fff;
			font-size: 34rpx;
			margin: 50rpx auto;
		}
	}
</style>